<template>
  <view>
    <view class="tabbar-title" v-if="elevatorType == 1">
      <v-tabs class="tabs" v-model="activeTab" :scroll="false" :tabs="tabs" @change="changeTab"></v-tabs>
    </view>
    <!-- 机房 -->
    <view class="root" v-if="elevatorType == 1">
      <uni-card>
        <!-- 机房、滑轮间环境 -->
        <view class="machine-div" v-for="(item,index) in machineList" :key="item.id">
          <view class="machine">
            <view class="">
              <image src="../../../static/image/straightLadder/show2.png" mode=""></image>
              <text class="machine-name">
                {{ item.projectName }}
              </text>
            </view>
            <!-- 开关 -->
            <switch v-if="item.upkeepResult == 2" @change="switch1Change(item.recordId)" disabled="flafalse"/>
            <switch v-if="item.upkeepResult == 1" checked @change="switch1Change(item.recordId)" disabled="flafalse"/>
          </view>
          <view class="remind">
            {{ item.projectRequire }}
          </view>
        </view>
      </uni-card>
      <block v-if="indexs == 0">
        <uni-card v-if="upkeepInfo.roomRemark">
          <view class="comment">
            <view>{{ upkeepInfo.roomRemark }}</view>
          </view>
        </uni-card>
        <!-- 图片 -->
        <view class="upimage" v-if="upkeepInfo.roomImg">
          <tm-image preview :width="300" :height="200" class="img" :src="upkeepInfo.roomImg" mode=""></tm-image>
        </view>
      </block>
      <!-- 层站 -->
      <block v-else-if="indexs == 1">
        <uni-card v-if="upkeepInfo.floorRemark">
          <view class="comment">
            <view>{{ upkeepInfo.floorRemark }}</view>
          </view>
        </uni-card>

        <!-- 图片 -->
        <view class="upimage" v-if="upkeepInfo.floorImg">
          <tm-image preview :width="300" :height="200" class="img" :src="upkeepInfo.floorImg " mode=""></tm-image>
        </view>
      </block>
      <!-- 桥箱 -->
      <block v-else-if="indexs == 2">
        <uni-card v-if="upkeepInfo.capsulesRemark">
          <view class="comment">
            <view>{{ upkeepInfo.capsulesRemark }}</view>
          </view>
        </uni-card>

        <!-- 图片 -->
        <view class="upimage" v-if="upkeepInfo.capsulesImg">
          <tm-image preview :width="300" :height="200" class="img" :src="upkeepInfo.capsulesImg" mode=""
                    @click="capsulesImgs"></tm-image>
        </view>
      </block>
      <block v-else-if="indexs == 3">
        <uni-card v-if="upkeepInfo.shaftRemark">
          <view class="comment">
            <view>{{ upkeepInfo.shaftRemark }}</view>
          </view>
        </uni-card>
        <!-- 图片 -->
        <view class="upimage" v-if="upkeepInfo.shaftImg">
          <tm-image preview :width="300" :height="200" class="img" :src="upkeepInfo.shaftImg" mode=""></tm-image>
        </view>
      </block>
      <!-- 签名 -->
      <uni-card>
        <view class="">
          <view class="tipText textleft">签字</view>
          <tm-image preview :width="300" :height="200" style="width: 100%;" class="img" :src="upkeepInfo.referUserSign"
                    mode=""></tm-image>
        </view>
      </uni-card>
      <uni-card>
        <view class="" @touchmove.prevent.stop="">
          <view class="tipText textleft" v-show="!Sureflag">签字</view>
          <canvas class="canvasHimc mycanvasAdmin" canvas-id="mycanvasAdmin"
                  @touchstart="touchstart($event,'mycanvasAdmin')"
                  @touchmove="touchmove" @touchend="touchend"></canvas>
          <view class="flexBottom">
            <view class="" @click="clear('mycanvasAdmin')">清除</view>
            <view class="" @click="rescueComplet">保存</view>
          </view>
          <!-- <view class="" @click="rescueComplet" v-if="save == true" style="text-align: center;">保存 </view> -->
        </view>
      </uni-card>
      <button type="default" @click="submitMaintain">提交</button>
    </view>
    <view class="root" style="margin-top: 20px;" v-if="elevatorType == 2">
      <uni-card>
        <!-- 机房、滑轮间环境 -->
        <view class="machine-div" v-for="(item,index) in machineList" :key="item.id">
          <view class="machine">
            <view class="">
              <image src="../../../static/image/straightLadder/show2.png" mode=""></image>
              <text class="machine-name">
                {{ item.projectName }}
              </text>
            </view>
            <!-- 开关 -->
            <switch v-if="item.upkeepResult == 2" @change="switch1Change(item.recordId)" disabled="flafalse"/>
            <switch v-if="item.upkeepResult == 1" checked @change="switch1Change(item.recordId)" disabled="flafalse"/>
          </view>
          <view class="remind">
            {{ item.projectRequire }}
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="comment">
          <view>{{ upkeepInfo.roomRemark }}</view>
        </view>
      </uni-card>
      <!-- 图片 -->
      <view class="upimage">
        <tm-image preview :width="300" :height="200" class="img" :src="upkeepInfo.roomImg" mode=""></tm-image>
      </view>
      <!-- 签名 -->
      <uni-card>
        <view class="">
          <view class="tipText textleft">签字</view>
          <image style="width: 100%;" class="img" :src="upkeepInfo.referUserSign" mode=""></image>
        </view>
      </uni-card>
      <uni-card>
        <view class="" @touchmove.prevent.stop="">
          <view class="tipText textleft" v-show="!Sureflag">签字</view>
          <canvas class="canvasHimc mycanvasAdmin" canvas-id="mycanvasAdmin"
                  @touchstart="touchstart($event,'mycanvasAdmin')"
                  @touchmove="touchmove" @touchend="touchend"></canvas>

          <view class="flexBottom">
            <view class="" @click="clear('mycanvasAdmin')">清除</view>
            <view class="" @click="rescueComplet">保存</view>
          </view>
          <!-- <view class="" @click="rescueComplet" v-if="save == true" style="text-align: center;">保存 </view> -->
        </view>
      </uni-card>
      <button type="default" @click="submitMaintains">提交</button>
    </view>
    <!-- 层站 -->

  </view>
</template>

<script>
import {getUpkeepDetail, submitUpkeepAuditInfo} from "@/api/iot/upkeepInfo";
import {ossUpload} from "@/api/system/oss";

export default {
  data() {
    return {
      elevatorType: "", //直梯带tab切换
      upkeepId: "", //保养清单页面详情id
      imageList: [],
      category: 'image',
      activeTab: 0,
      tabs: ['机房', '层站', '轿厢', '井道'],
      machineList: [], //渲染列表
      updateUpkeep: "", //开关状态
      ctx: '', //绘图图像
      points: [], //路径点集合
      Sureflag: false, //管理签字
      indexs: 0,
      signatures: '', //签名
      save: true,
      upkeepInfo: '',
    }
  },
  onLoad(e) {
    this.upkeepId = e.upkeepId;
    this.getMachineList(0);
  },
  methods: {
    goback() {
      console.log('866545')
      uni.navigateTo({
        url: '/pages/gird/toMaintain/toMaintain',
      })
      // uni.switchTab({
      // 	url: '/pages/gird/work/work'
      // });
    },
    // 导航切换
    changeTab(index) {
      this.indexs = index
      this.getMachineList(index);
      console.log('当前选中的项：' + index)
    },
    //桥箱上传图片
    async capsulesImgs() {
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          const tempFilePaths = res.tempFilePaths;
          const ress = await ossUpload(tempFilePaths[0]);
          console.log('ress', ress)
          this.capsulesImg = ress.url
        }
      });
    },
    //查询保养清单页面详情接口
    async getMachineList(idn) {
      const data = await getUpkeepDetail(this.upkeepId, idn + 1);
      this.upkeepInfo = data
      this.elevatorType = data.elevator.elevatorType
      this.machineList = data.upkeepProjectRecordVoList
      await uni.setNavigationBarTitle({
        title: this.upkeepInfo.elevatorName
      })
      // console.log(res.data.data.projectList)
    },
    async submitMaintain() {
      if (this.shaftImg == '') {
        uni.showToast({
          title: '请上传井道图片',
          icon: 'none'
        })
        return
      }
      let parme = {
        type: 2,
        auditStatus: 1,
        auditUserSign: this.signatures,
        upkeepId: this.upkeepId,
      }
      const res = await submitUpkeepAuditInfo(parme)
      let pages = getCurrentPages();
      let prvePage = pages[pages.length - 2]
      prvePage.$vm.changeTab(1)
      uni.navigateBack({})
    },
    async submitMaintains() {
      if (this.shaftImg == '') {
        uni.showToast({
          title: '请上传井道图片',
          icon: 'none'
        })
        return
      }
      if (this.signatures == '') {
        uni.showToast({
          title: '请签名',
          icon: 'none'
        })
        return
      }
      let parme = {
        type: 2,
        auditStatus: 1,
        auditUserSign: this.signatures,
        upkeepId: this.upkeepId,
      }
      const res = await submitUpkeepAuditInfo(parme)
      let pages = getCurrentPages();
      let prvePage = pages[pages.length - 2]
      prvePage.$vm.changeTab(1)
      uni.navigateBack({})
    },
    rescueComplet() {
      let t = this;
      uni.canvasToTempFilePath({
        // fileType:""
        canvasId: 'mycanvasAdmin',
        success: async function (res) {
          let filest = await ossUpload(res.tempFilePath);
          t.save = false
          t.signatures = filest.url;
        }
      })
    },


    //触摸开始，获取到起点
    touchstart: function (e, id) {
      this.ctx = uni.createCanvasContext(id, this); //创建绘图对象

      //设置画笔样式
      this.ctx.lineWidth = 4;
      this.ctx.lineCap = "round"
      this.ctx.lineJoin = "round"

      let startX = e.changedTouches[0].x;
      let startY = e.changedTouches[0].y;
      let startPoint = {
        X: startX,
        Y: startY
      };
      this.points.push(startPoint);
      //每次触摸开始，开启新的路径
      this.ctx.beginPath();
    },

    //触摸移动，获取到路径点
    touchmove: function (e) {
      let moveX = e.changedTouches[0].x;
      let moveY = e.changedTouches[0].y;
      let movePoint = {
        X: moveX,
        Y: moveY
      };
      this.points.push(movePoint); //存点
      let len = this.points.length;
      if (len >= 2) {
        this.draw(); //绘制路径
      }
    },
    // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
    touchend: function () {
      this.points = [];
    },
    /* ***********************************************
    #   绘制笔迹
    #	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
    #	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
    #	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
    ************************************************ */
    draw: function () {
      let point1 = this.points[0]
      let point2 = this.points[1]
      this.points.shift()
      this.ctx.moveTo(point1.X, point1.Y)
      this.ctx.lineTo(point2.X, point2.Y)
      this.ctx.stroke()
      this.ctx.draw(true)
    },
    clear(id) {
      let that = this;
      uni.getSystemInfo({
        success: function (res) { // res - 各种参数
          let info = uni.createSelectorQuery().select(`.${id}`);
          info.boundingClientRect(function (data) {
            console.log(data)
            that.Sureflag = false;
            that.signatures = ''
            that.ctx.clearRect(0, 0, data.width, data.height)
            that.ctx.draw(true)
          }).exec()
        }
      });
    },
  }
}
</script>

<style scoped>
.tabs {
  height: 200rpx;
}

.v-tabs {
}

.v-tabs__container {
  height: 200rpx !important;
  line-height: 100rpx !important;
}

.uni-card {
  width: 670rpx;
  /* height: 820rpx; */
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin: 0 auto;
  border: none;
  margin-bottom: 30rpx;
}

.v-tabs {
  height: 110rpx;
  background-color: #F0F3F6;
}

/* 机房 */
.machine-div {
  /* height: 150rpx; */
  border-bottom: 1px solid #E2E6EF;
  line-height: 30rpx;

}

.machine {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.machine image {
  width: 30rpx;
  height: 30rpx;
  vertical-align: middle;
  margin-right: 19rpx;
}

.machine-name {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #34363D;
}

switch {
  transform: scale(0.8, 0.7)
}

.remind {
  /* height: 60rpx; */
  margin-left: 55rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #989BA6;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 备注 */
.comment {
  width: 100%;
  /* height: 226rpx; */
  background: #FFFFFF;
  border-radius: 16rpx;
  border: none;
}

.fuck-textarea {
  border: none !important;
}

/* 上传图片 */
.upimage {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  width: 670rpx;
  margin: 0 auto;
  margin-bottom: 50rpx;
  /* background-color: #FFFFFF; */
}

.img {
  padding: 20rpx 0;
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  position: relative;
  margin-bottom: 20rpx;
}

.imgIcon {
  width: 48rpx;
  height: 48rpx;
  vertical-align: middle;
  position: absolute;

  left: 210rpx;
}

easy-upload {
  width: 200rpx;
  height: 200rpx;
}

/* 提交 */
button {
  width: 670rpx;
  height: 104rpx;
  background: #017EFE;
  box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(1, 126, 254, 0.2);
  border-radius: 52rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  line-height: 104rpx;
  margin-top: 100rpx;
  margin-bottom: 69rpx;
}

/* 签名画布 */
/* 画布 */
/* .signature{
  margin-top: 20rpx;
} */
.mycanvas {
  /* width: 100%; */
  width: 300rpx;
  height: 151rpx;
  /* height: calc(100vh - 1200upx); */
  background-color: #ECECEC;
}

.x-m-con {
  width: 255rpx;
  /* height: 151rpx; */
  margin: 0 auto;
}

.success {
  width: 150rpx;
  height: 56rpx;
  background: #017EFE;
  box-shadow: 0px 5px 10px 0px rgba(1, 126, 254, 0.2);
  border-radius: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 15rpx;
}

.success text {
  color: #FFFFFF;
}

.successRight {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.submitOrder {
  padding: 0 20rpx;
  word-spacing: 10rpx;

}

.submitOrder text {
  margin: 0 10rpx;
}

.f16 {
  margin-top: 15px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #34363D;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  background-color: transparent;
}

.flexBottom {
  display: flex;
  align-items: center;

}

.flexBottom view {
  text-align: center;
  flex: 1;
}
</style>
